/* 
英雄支付类型 :  10 本周免费  11 新手推荐
英雄类型 : 3:坦克  1:战士  4:刺客  2:法师   5:射手   6:辅助
*/
const 后台数组_英雄信息 = [
    {
        "图标地址": "./images/105.jpg",
        "英雄姓名": "廉颇",
        "英雄支付类型": 10,
        "英雄类型": 3,
    }, {
        "图标地址": "./images/106.jpg",
        "英雄姓名": "小乔",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/107.jpg",
        "英雄姓名": "赵云",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/108.jpg",
        "英雄姓名": "墨子",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/109.jpg",
        "英雄姓名": "妲己",
        "英雄支付类型": 11,
        "英雄类型": 2,
    }, {
        "图标地址": "./images/110.jpg",
        "英雄姓名": "嬴政",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/111.jpg",
        "英雄姓名": "孙尚香",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/112.jpg",
        "英雄姓名": "鲁班七号",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/113.jpg",
        "英雄姓名": "庄周",
        "英雄支付类型": 10,
        "英雄类型": 6,
    }, {
        "图标地址": "./images/114.jpg",
        "英雄姓名": "刘禅",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/115.jpg",
        "英雄姓名": "高渐离",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/116.jpg",
        "英雄姓名": "阿轲",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/117.jpg",
        "英雄姓名": "钟无艳",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/118.jpg",
        "英雄姓名": "孙膑",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/119.jpg",
        "英雄姓名": "扁鹊",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/120.jpg",
        "英雄姓名": "白起",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/121.jpg",
        "英雄姓名": "芈月",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/123.jpg",
        "英雄姓名": "吕布",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/124.jpg",
        "英雄姓名": "周瑜",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/126.jpg",
        "英雄姓名": "夏侯惇",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/127.jpg",
        "英雄姓名": "甄姬",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/128.jpg",
        "英雄姓名": "曹操",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/129.jpg",
        "英雄姓名": "典韦",
        "英雄支付类型": 10,
        "英雄类型": 1,
    }, {
        "图标地址": "./images/130.jpg",
        "英雄姓名": "宫本武藏",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/131.jpg",
        "英雄姓名": "李白",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/132.jpg",
        "英雄姓名": "马可波罗",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/133.jpg",
        "英雄姓名": "狄仁杰",
        "英雄支付类型": 11,
        "英雄类型": 5,
    }, {
        "图标地址": "./images/134.jpg",
        "英雄姓名": "达摩",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/135.jpg",
        "英雄姓名": "项羽",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/136.jpg",
        "英雄姓名": "武则天",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/139.jpg",
        "英雄姓名": "老夫子",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/140.jpg",
        "英雄姓名": "关羽",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/141.jpg",
        "英雄姓名": "貂蝉",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/142.jpg",
        "英雄姓名": "安琪拉",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/144.jpg",
        "英雄姓名": "程咬金",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/146.jpg",
        "英雄姓名": "露娜",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/148.jpg",
        "英雄姓名": "姜子牙",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/149.jpg",
        "英雄姓名": "刘邦",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/150.jpg",
        "英雄姓名": "韩信",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/152.jpg",
        "英雄姓名": "王昭君",
        "英雄支付类型": 10,
        "英雄类型": 2,
    }, {
        "图标地址": "./images/153.jpg",
        "英雄姓名": "兰陵王",
        "英雄支付类型": 10,
        "英雄类型": 4,
    }, {
        "图标地址": "./images/154.jpg",
        "英雄姓名": "花木兰",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/156.jpg",
        "英雄姓名": "张良",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/157.jpg",
        "英雄姓名": "不知火舞",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/162.jpg",
        "英雄姓名": "娜可露露",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/163.jpg",
        "英雄姓名": "橘右京",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/166.jpg",
        "英雄姓名": "亚瑟",
        "英雄支付类型": 11,
        "英雄类型": 1,
    }, {
        "图标地址": "./images/167.jpg",
        "英雄姓名": "孙悟空",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/168.jpg",
        "英雄姓名": "牛魔",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/169.jpg",
        "英雄姓名": "后羿",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/170.jpg",
        "英雄姓名": "刘备",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/171.jpg",
        "英雄姓名": "张飞",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/173.jpg",
        "英雄姓名": "李元芳",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/174.jpg",
        "英雄姓名": "虞姬",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/175.jpg",
        "英雄姓名": "钟馗",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/177.jpg",
        "英雄姓名": "成吉思汗",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/178.jpg",
        "英雄姓名": "杨戬",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/183.jpg",
        "英雄姓名": "雅典娜",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/184.jpg",
        "英雄姓名": "蔡文姬",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/186.jpg",
        "英雄姓名": "太乙真人",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/180.jpg",
        "英雄姓名": "哪吒",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/190.jpg",
        "英雄姓名": "诸葛亮",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/192.jpg",
        "英雄姓名": "黄忠",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/191.jpg",
        "英雄姓名": "大乔",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/187.jpg",
        "英雄姓名": "东皇太一",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/182.jpg",
        "英雄姓名": "干将莫邪",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/189.jpg",
        "英雄姓名": "鬼谷子",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/193.jpg",
        "英雄姓名": "铠",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/196.jpg",
        "英雄姓名": "百里守约",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/195.jpg",
        "英雄姓名": "百里玄策",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/194.jpg",
        "英雄姓名": "苏烈",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/198.jpg",
        "英雄姓名": "梦奇",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/179.jpg",
        "英雄姓名": "女娲",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/501.jpg",
        "英雄姓名": "明世隐",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/199.jpg",
        "英雄姓名": "公孙离",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/176.jpg",
        "英雄姓名": "杨玉环",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/502.jpg",
        "英雄姓名": "裴擒虎",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/197.jpg",
        "英雄姓名": "弈星",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/503.jpg",
        "英雄姓名": "狂铁",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/504.jpg",
        "英雄姓名": "米莱狄",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/125.jpg",
        "英雄姓名": "元歌",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/510.jpg",
        "英雄姓名": "孙策",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/137.jpg",
        "英雄姓名": "司马懿",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/509.jpg",
        "英雄姓名": "盾山",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/508.jpg",
        "英雄姓名": "伽罗",
        "英雄支付类型": 10,
        "英雄类型": 5,
    }, {
        "图标地址": "./images/312.jpg",
        "英雄姓名": "沈梦溪",
        "英雄支付类型": 10,
        "英雄类型": 2,
    }, {
        "图标地址": "./images/507.jpg",
        "英雄姓名": "李信",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/513.jpg",
        "英雄姓名": "上官婉儿",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/515.jpg",
        "英雄姓名": "嫦娥",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/511.jpg",
        "英雄姓名": "猪八戒",
        "英雄类型": 3,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/529.jpg",
        "英雄姓名": "盘古",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/505.jpg",
        "英雄姓名": "瑶",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/506.jpg",
        "英雄姓名": "云中君",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/522.jpg",
        "英雄姓名": "曜",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/518.jpg",
        "英雄姓名": "马超",
        "英雄类型": 1,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/523.jpg",
        "英雄姓名": "西施",
        "英雄类型": 2,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/525.jpg",
        "英雄姓名": "鲁班大师",
        "英雄类型": 6,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/524.jpg",
        "英雄姓名": "蒙犽",
        "英雄类型": 5,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/531.jpg",
        "英雄姓名": "镜",
        "英雄类型": 4,
        "英雄支付类型": 1
    }, {
        "图标地址": "./images/527.jpg",
        "英雄姓名": "蒙恬",
        "英雄类型": 1,
        "英雄支付类型": 1
    }]


function 渲染页面显示英雄(筛选后的数组数据) {
    // 先声明一个空字符串
    let 字符串 = ''
// forEach方法遍历数组
    筛选后的数组数据.forEach(function (元素) {
        const {图标地址, 英雄姓名} = 元素 // 对象解构赋值
        // 依次,拼接字符串.  注意:引号是 反引号
        字符串 += `<li>
                <a href="#" target="_blank"><img src="${图标地址}" width="91" height="91" alt="${英雄姓名}" />${英雄姓名}</a>
            </li>    
            `
    })
// 获取DOM元素
    const 显示英雄列表 = document.querySelector('.显示英雄列表')
    显示英雄列表.innerHTML = 字符串// 把字符串信息修改到,  <ul class="显示英雄列表 clearfix"> 里面去
}

渲染页面显示英雄(后台数组_英雄信息) // 先渲染页面,显示全部英雄


// ------ 案例要求,点击什么类型的英雄选项,显示相应的英雄

// 获取DOM元素.  要操作的内容有一个特点, 都是 '类型'类,里的 li标签.  组成一个数组,用来操作 li标签
const 英雄选择框_li数组 = document.querySelectorAll('.类型>li') // '.类型>li', 子代选择器

// 这里通过forEach方法, 遍历数组
英雄选择框_li数组.forEach(li标签 => {
    // 循环遍历, 监控点击事件
    li标签.addEventListener('click', function () {
        // 这里目的是, 点击相应的选项,有蓝点显示,同时其他蓝点消除
        const 当前蓝点 = document.querySelector('.当前蓝点') // 检查获取有 '当前蓝点'类 的DOM元素
        当前蓝点.classList.remove('当前蓝点') // 删除这个CSS类, 也就是删除了 蓝点
        this.classList.add('当前蓝点') // this,谁是当前调用者,谁加 蓝点 显示

        console.log(当前蓝点) // 控制台输出,看看分别是什么
        console.log(this)

        // 下面通过,filter方法筛选数组数据,把筛选后的数据,传给 渲染函数. 达到选择相应的类型,显示相应的英雄的目的

        console.log(this.dataset.支付类型)  // 得到当前元素的自定义属性值
        // 这个自定义属性值与数组元素, 元素对象里的属性信息相对应, 这样间接通过 自定义属性值 作为,数组筛选条件
        //                                  +this是因为我们得到的字符串类型, + 转换成数字类型               || 或的关系,这里我们要判断2个对象属性和2个自定义属性值 的匹配
        let 筛选后的数组数据 = 后台数组_英雄信息.filter(元素 => 元素.英雄支付类型 === +this.dataset.支付类型 || 元素.英雄类型 === +this.dataset.英雄类型)

        // 这里说明下,如果没有满足条件的,filter回返回一个空数组. 这里判断数组是否空,如果我们点击 '全部'按钮 那么就没有满足条件的
        if (筛选后的数组数据.length === 0) {
            渲染页面显示英雄(后台数组_英雄信息) // 如果数组空,把完整的数组数据,传个渲染函数
        } else {
            渲染页面显示英雄(筛选后的数组数据)
        }
    })
})
// 额外说明: 使用了箭头函数. 箭头函数在一个参数和一行代码时,省略 括号


